<template>
  <div class="s-box">

    <group title="我的持仓">
      <div class="add" @click="routerTo('searchPositions')">+添加持仓</div>
      <div class="vux-1px-t position-content" v-for="item in myPositionList" @click="manage(item)">
        <div class="positionList-item">
          <!--<span class="text-large">产品名</span>-->
          <span class="text-large">{{item.productName}}</span>
        </div>
        <div class="positionList-item">
          <span>平台</span>
          <span>{{item.platformName}}</span>
        </div>
        <div class="positionList-item position-info-content">
          <div class="position-info-item">
            <span>市值</span>
            <br>
            <span>{{item.nowAmount}}元</span>
          </div>
          <div class="my-line"></div>
          <div class="position-info-item">
            <span>当日盈亏</span>
            <br>
            <span :class="[item.todayProfit<0?'text-green':'text-red']">{{item.todayProfit | formatPlusMinus}}元</span>
          </div>
          <div class="my-line"></div>
          <div class="position-info-item">
            <span>总收益</span>
            <br>
            <span :class="[item.profitAmount<0?'text-green':'text-red']">{{item.profitAmount | formatPlusMinus}}元</span>
          </div>
        </div>
      </div>
    </group>
    <actionsheet v-model="actionShow" :menus="actionMenus" @on-click-menu="chooseManage" show-cancel></actionsheet>

  </div>
</template>

<script>
  import {Group, GroupTitle, Actionsheet} from 'vux'

  export default {
    components: {
      Group,
      GroupTitle,
      Actionsheet
    },
    data() {
      return {
        myPositionList: [],
        actionPosition: {},
        actionMenus: {
          buy: '增持',
          sale: '卖出'
        },
        actionShow: false,
      }
    },
    created() {
      this.getAllMyPositions();
    },
    methods: {
      getAllMyPositions() {
        this.$api.getAllMyPositions().then((data) => {
          this.myPositionList = data.myPositionList;
        });
      },
      manage(item) {
        this.actionPosition = item;
        this.actionShow = true;
      },
      chooseManage(key) {
        switch (key) {
          case 'buy':
            this.$router.push({
              path: '/user/positionBusiness',
              query: {
                myPositionId: this.actionPosition.myPositionId,
                type:'buy'
              }
            });
            break;
          case 'sale':
//              this.$vux.toast.text('暂未开放','middle');
             this.$router.push({
               path: '/user/positionBusiness',
               query: {
                 myPositionId: this.actionPosition.myPositionId,
                 type:'sale'
               }
             });
            break;
        }
      }
    }
  }
</script>

<style lang="less" scoped>

  .add {
    background-color: #f1f1f1;
    color: #538fa2;
    font-size: .4rem;
    padding: 8px 15px;
    border-bottom: 1px solid #ccc;
  }

  .position-content {
    padding: 10px 15px;
    border-bottom: 3px solid #ccc;
  }

  .positionList-item {
    width: 100%;
    text-align: left;
    /*border-right: 1px solid #f1f1f1;*/
    span {
      font-size: .3rem;
    }
  }

  .position-info-content {
    border-top: 1px solid #ccc;
    display: -webkit-flex;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-grow: 1;


  }

  .position-info-item {
    /*display: inline-block;*/
    /*width: 3rem;*/
    flex:1;
    text-align: center;
    padding: 0 10px;
  }
</style>
